<template>
  <div class="mt-3">
    <textarea ref="textareaRef" v-model="content"
      class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      :placeholder="placeholder" rows="3" />
    <div class="flex justify-end gap-2 mt-2">
      <button @click="$emit('cancel')"
        class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">
        取消
      </button>
      <button @click="handleSubmit"
        class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700"
        :disabled="!content.trim()">
        提交
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '写下你的评论...'
  }
})

const emit = defineEmits(['submit', 'cancel', 'update:modelValue'])

const content = ref(props.modelValue)
const textareaRef = ref<HTMLTextAreaElement | null>(null)

onMounted(() => {
  textareaRef.value?.focus()
})

const handleSubmit = () => {
  emit('submit', content.value.trim())
  content.value = ''
}
</script>